<template>
  <div class="case">
    <banner img="../assets/img/bgtop.jpg" >
    </banner>
    <div class="case-product markdown-body">
      <i class="el-icon-caret-left" @click="back">返回</i>
      <div class="case-product-content animate__animated animate__bounceIn">
        <p class="product-title">{{caseIdList.m}}</p>
        <p class="product-time">{{caseIdList.s | relativeTime}}</p>
        <div class="content" v-for="(item, index) in caseIdList.n" :key="index">
          <img class="Img" v-if="item.lx=='图片'" v-lazy="item.nr" alt />
          <p class="product-content" v-if="item.lx=='文字'">{{item.nr}}</p>
        </div>
      </div>
      <div class="more">
        <h3>更多案例</h3>
        <hr>
        <router-link class="imggoin" @click="doActive(index)"
        :to="{ name: 'casedetails', params: { id: index }}" 
        v-for="(item, index) in caseList" :key="index">
          {{item.m}}
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "../components/Banner";
export default {
  components: {
    Banner
  },
  data() {
    return {
      pid: 0,
      caseIdList: {},
      caseList: {}
    };
  },
  created() {
    // 获取当前详情页的url id
    this.pid = this.$route.params.id;
    window.console.log(this.pid);
  },
  mounted() {
    this.loadData();
    this.datalist()
  },
  methods: {
    async loadData() {
        const { data: res }= await this.$http.get("/data/get",{
          params:{
            view: "系统后台",
            code: "wzxx",
            data: JSON.stringify({fz:2})
          }
        })
        // this.caseIdList = JSON.parse(JSON.parse(res.data)[this.pid])
        if(typeof(JSON.parse(res.data)[this.pid])=="string"){
          this.caseIdList=JSON.parse(JSON.parse(res.data)[this.pid])
        }else{
          this.caseIdList=JSON.parse(res.data)[this.pid]
        }
        console.log(this.caseIdList)
    },
    back () {
      this.$router.go(-1)
    },
    async datalist() {
      const { data: res } = await this.$http.get("/data/get",{
        params:{
          view: "系统后台",
          code: "wzxx",
          data: JSON.stringify({fz:2})
        }
      })
      this.caseList = JSON.parse(res.data)
      this.caseList.forEach((element,index) => {
        if(typeof(element)=='string'){
          element=JSON.parse(element)
          this.caseList[index]=element
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./article/github-markdown.css";
.case {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f7f8f8;
  .el-icon-caret-left{
    font-size: 20px;
    cursor: pointer;
    padding: 10px 0 0 10px;
  }
  &-product {
    position: relative;
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
    box-shadow:0px 0px 10px rgb(170, 168, 168);
    //border: 1px solid red;
    .more{
      box-sizing: border-box;
      padding: 0 20px;
      width: 280px;
      position: absolute;
      top: 100px;
      right: 0;
      hr{
        height: 1.5px;
        background-color: black;
      }
      .imggoin{
        display: block;
        color: black;
        padding: 5px 0;
        text-decoration:none;
        &:hover{
          color: #fb1d1d;
        }
      }
    }
    &-content {
      text-align: center;
      // width: 760px;
      width: 65%;
      margin-top: 0;
      margin-left: 11%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px 0;
      Img {
        // margin: 0 auto;
        width: 100%;
        // height: 430px;
        height: 35.4%;
      }
      .product-title {
        font-size: 25px;
        // color: #e13834;
        font-weight: bolder;

        padding: 20px 0;
      }
      .product-content {
        text-align: left;
        font-size: 17px;
        padding: 20px 0;
      }
    }
  }
}
</style>